<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>门诊月度统计</title>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <!-- 搜索条件开始 -->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">
    <form class="layui-form" method="post" id="searchFrm">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">选择年份:</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="year" readonly="readonly" placeholder="yyyy">
          </div>
        </div>
        <div class="layui-inline">
          <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        </div>
      </div>
    </form>
  </blockquote>
  <!-- 搜索条件结束 -->
  <div id="container" style="height: 400px"></div>

</div>
</div>

</body>

<script src="../../js/echarts.min.js" charset="utf-8"></script>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="text/javascript">
  layui.use([ 'jquery', 'layer', 'form', 'table','laydate','element'  ], function() {
    var $ = layui.jquery;
    var laydate=layui.laydate;

    laydate.render({
      elem:'#year',
      type:'year',
      value:new Date()
    });
    $("#doSearch").click(function(){
      getData();
    });

    function getData(){
      var year=$("#year").val();
      if(year===""){
        year=new Date().getFullYear();
      }
      // console.log('$----------------------------------', $.post);
      $.post("/web/finance/reportYearFinance",{year:year},function(data){
        if(data==null){
          console.log("data", data)
        }
        // alert(data);

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
          title : {
            text: '医院年度额统计',
            x:'center'
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: data,
            type: 'line'
          }]
        };
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      });
    }
    getData();
  })
</script>

</html>